<template>
	<view class="c-upload" :style="[customStyle]">
		<u-upload width="88rpx" height="88rpx" ref="uUpload" name="file" imageMode="circle" :formData="getFormData" :action="vuex_ossUrl"
		 @on-choose-complete="getTempImgUrl" :auto-upload="false" :show-progress="false" :custom-btn="customBtn" :deletable="false" :max-size="5 * 1024 * 1024" max-count="1">
			<view slot="addBtn">
				<slot name="addView"></slot>
			</view>
		</u-upload>
	</view>
</template>

<script>
	export default {
		name: 'c-upload',
		props: {
			customStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			//是否显示自定义组件
			customBtn: {
				type: Boolean,
				default: false
			},
			formData: {
				type: Object,
				default () {
					return {};
				}
			},

		},
		data() {
			return {
				filePath: ''
			}
		},
		watch: {
			filePath(val, oldVal) {
				this.getFormData.key = val
				this.$refs.uUpload.upload();
			}
		},
		computed: {
			getFormData() {
				return Object.assign({}, {
					'key': this.filePath,
					'OSSAccessKeyId': this.vuex_OssInit.access_key_id,
					'policy': this.vuex_OssInit.policy,
					'signature': this.vuex_OssInit.signature,
					'callback': this.vuex_OssInit.callback_body,
					'x:access_token': this.vuex_OssInit.callback_token,
					'success_action_status': '200',
				})
			},
		},
		methods: {
			getTempImgUrl(list, index) {
				console.log(this)
				this.filePath = list[0].file.path
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-upload {
	}
</style>
